<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />-->
<title>涛宝商城-密码修改</title>
<link rel="stylesheet" type="text/css"
	th:href="@{appstyle/css/mdui.css}" />
<link rel="stylesheet" type="text/css"
	th:href="@{appstyle/css/core.css}" />
<script type="text/javascript" th:src="@{appstyle//js/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{appstyle/js/mdui.js}"></script>
</head>
<body>
	<style>
* {
	margin: 0;
	padding: 0;
}

body {
	min-width: 1080px;
}

#denglu {
	margin: 0px auto;
	width: 400px;
	height: 280px;
	background-color: white;
	margin-top: 40px;
}

h1 {
	text-align: center;
	border-bottom: 1px solid #ddd;
	padding: 10px;
	font-size: 18px;
	font-weight: 700;
	color: #666;
	margin-bottom: 20px;
}

.input {
	padding: 10px 0 10px 0px;
	margin: 5px;
	margin-bottom: 10px;
	width: 308px;
	height: 18px;
	line-height: 18px;
	font-size: 15px;
	color: #66CCFF;
	outline: none;
	text-align: center;
}

.button {
	margin: 5px;
	width: 312px;
	padding: 6px 0;
	background-color: #66CCFF;
	color: white;
	font-size: 20px;
	cursor: pointer;
	border: 0;
}

#zuc {
	width: 325px;
	margin: 0 auto;
}

#logo {
	margin: 0 auto;
	width: 1080px;
	height: 60px;
}

.logo_1 {
	font-size: 25px;
	font-weight: bold;
	color: #66CCFF;
	position: relative;
	top: 10px;
	text-decoration: none;
}

#foot {
	height: 361px;
	margin: 0 auto;
	border: 1px solid #66CCFF;
	background-color: #66CCFF;
}

.zuce1 {
	padding: 0 5px;
	color: #666;
	text-decoration: none;
	font-size: 12px;
}

#zuce {
	margin: 8px auto 0;
	text-align: right;
	color: #666;
}

.zuce1:hover {
	color: #66CCFF;
}

#tail {
	width: 1080px;
	height: 60px;
	margin: 0 auto;
}

.p2 {
	text-align: center;
	margin-top: 15px;
	color: #666;
	font-size: 12px;
	cursor: pointer;
}
</style>
	<form>
		<div id="logo">
			<a class="logo_1" href="index.html">涛宝商城</a>
		</div>
		<div id="foot" class="checkdiv1">
			<div id="denglu">
				<h1>找回密码</h1>
				<div id="zuc">
					<form action="">
						<input class="input" id="username" type="text"
							placeholder="请输入要找回的用户名" /><br /> <input class="button"
							id="loginBtn1" type="button" value="下一步" />
					</form>
				</div>
			</div>
		</div>
		<div id="foot" class="checkdiv2">
			<div id="denglu">
				<h1>密保验证</h1>
				<div id="zuc">
					密保问题:<span id="question" style="font-weight: 500;"></span> <input
						class="input" id="answer" type="text" placeholder="请输入您的密保答案" /><br />
					<input class="button" id="loginBtn2" type="button" value="确认提交答案" />
				</div>
			</div>
		</div>
		<div id="foot" class="checkdiv3">
			<div id="denglu">
				<h1>密保验证</h1>
				<div id="zuc">
					<input class="input" id="newpwd1" type="text"
						placeholder="请输入您的新密码" /><br /> <input class="input"
						id="newpwd2" type="text" placeholder="请输入您的新密码" /><br /> <input
						class="button" id="loginBtn3" type="button" value="提交新密码" />
				</div>
			</div>
		</div>
		<div id="tail">
			<p class="p2">涛宝商城</p>
			<p class="p2">Copyright © 2019 taobaostore.top All Rights
				Reserved</p>
		</div>
	</form>
</body>
</html>
<script type="text/javascript">
	$(document).ready(function() {
		$(".checkdiv2").hide();// 初始化将默认div隐藏
		$(".checkdiv3").hide();
		// 第一次验证信息
		$("#loginBtn1").click(function() {
			$.ajax({
				url : "user/checkUserName.do",
				Type : "post",
				data : "username=" + $("#username").val(),
				dataType : "json",
				success : function(data) {
					if (data.status == 0) {
						mdui.snackbar({
							message : '验证成功',
							position : 'top',
							timeout : 1000,
							onClosed : function() {
								$(".checkdiv1").hide();
								$("#question").text(data.msg);
								$(".checkdiv2").show();// 初始化将默认div隐藏
							}
						});
					} else {
						mdui.snackbar({
							message : data.msg,
							position : 'top',
							timeout : 1000
						});
					}
				}
			})
		})
		var pwdToken;
		$("#loginBtn2").click(function() {
			$.ajax({
				url : "user/checkQuestion.do",
				Type : "post",
				data : {
					question : $("#question").text(),
					username : $("#username").val(),
					answer : $("#answer").val(),
				},
				dataType : "json",
				success : function(data) {
					pwdToken = data.msg;
					if(data.status==0){
						mdui.snackbar({
							message : '验证成功',
							position : 'top',
							timeout : 1000,
							onClosed : function() {
								$(".checkdiv2").hide();
								$(".checkdiv3").show();
							}
						});
					}else{
						mdui.snackbar({
							message : data.msg,
							position : 'top',
							timeout : 1000
						});
					}
				}
			})
		})
		$("#loginBtn3").click(function() {
			if($("#newpwd1").val()==$("#newpwd2").val()){
				$.ajax({
					url : "user/forgetResetPassword.do",
					Type : "post",
					data : {
						username : $("#username").val(),
						passwordNew : $("#newpwd1").val(),
						forgetToken : pwdToken,
					},
					dataType : "json",
					success : function(data) {
						mdui.snackbar({
							message : data.msg+"即将自动跳转登录界面",
							position : 'top',
							timeout : 1000,
							onClosed : function() {
								location.href="Land.html";
							}
						});
					},error:function(){
						alert("回调失败!");
					}
				})
			}else{
				mdui.snackbar({
					message : '两次密码输入不同,请您修改!!',
					position : 'top',
					timeout : 1000
				});
			}
		})
	})
</script>
